<template>
  <div class="comment">
    <p class="comment-title">
      <span>评论</span><span>({{ datalength }})</span>
    </p>
    <div class="commentMyImg">
      <img :src="myUser.user_img" alt="" v-if="myUser" />
      <img src="~images/head_img.png" alt="" v-else />

      <input
        v-model="comcontent"
        ref="postipt"
        type="text"
        placeholder="说点什么吧"
      />
      <button @click="commentPublish">发表</button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        myUser: null,
        comcontent: '',
      }
    },
    props: ['datalength'],
    methods: {
      async myUserInfo() {
        const res = await this.$http.get('/user/' + localStorage.getItem('id'))
        this.myUser = res.data[0]
      },
      commentPublish() {
        if (
          !this.myUser &&
          !localStorage.getItem('token') &&
          !localStorage.getItem('id')
        ) {
          this.$msg.fail('请先登录')
          return
        }
        this.$emit('postcomment', this.comcontent)
        this.comcontent = ''
      },
      focusIpt() {
        this.$refs.postipt.focus()
      },
    },
    created() {
      if (localStorage.getItem('token')) {
        this.myUserInfo()
      }
    },
    updated() {
      this.focusIpt()
    },
  }
</script>

<style lang="stylus" scoped>
  .comment
    padding: 30px 10px 0 10px

    .comment-title
      span:nth-child(2)
        color: #aaa
        margin-left: 10px

  .commentMyImg
    padding: 10px 0
    display: flex

    img
      height: 25px
      width: 25px
      border-radius: 50%

    input
      outline: none
      border: 0
      background-color: #f4f4f4
      border-radius: 13px
      font-size: 12px
      padding: 0 20px 0 15px
      margin-left: 10px
      width: 200px

    button
      outline: none
      border: 0
      border-radius: 12px
      background: #fb7299
      color: white
      font-size: 12px
      padding: 0 15px
</style>